<template>
  <el-card class="list-page role-container">
    <div class="list-h">
      <el-button
        type="primary"
        @click="handleAdd"
        v-auth="`/projectsS/monomer--add`"
        class="add-option"
        >创建新单体工程</el-button
      >

      <el-form
        :inline="true"
        :model="formInline"
        ref="formRef"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSearch"
            v-auth="`/projectsS/monomer--query`"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
      <el-table
        :data="tableData"
        stripe
        v-loading="loading"
        :header-cell-style="{
          background: '#F7F9FD',
          color: '#000',
          height: '48px',
          borderTop: '1px soild #E4E8F2'
        }"
      >
        <template #empty>
          <el-empty :image-size="150" description="暂无数据"></el-empty>
        </template>
        <el-table-column type="index" label="序号" width="50">
          <template v-slot="scope">
            <span>{{
              (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="engineerNum" label="单体工程编号">
        </el-table-column>
        <el-table-column
          prop="engineerName"
          label="单体工程名称"
        ></el-table-column>
        <el-table-column
          prop="engineerTypeName"
          label="工程类型"
        ></el-table-column>
        <el-table-column prop="leaderName" label="负责人"></el-table-column>
        <el-table-column prop="createUserName" label="创建人"></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="160"
        ></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button
              type="text"
              @click="handleEdit(row)"
              v-auth="`/projectsS/monomer--edit`"
              >编辑</el-button
            >
            <el-button
              type="text"
              class="btns-danger"
              v-auth="`/projectsS/monomer--delete`"
              @click="showDeleteMessageBox(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-skeleton>
    <re-pagination
      :total="total"
      v-show="total > 0"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch"
    />

    <el-drawer
      size="50%"
      v-model="drawer"
      :before-close="handleClose"
      destroy-on-close
      custom-class="demo-drawer"
    >
      <template #title>
        <div class="demo-drawer__header">
          {{ mode === "add" ? "创建单体" : "编辑单体" }}
        </div>
      </template>
      <div class="demo-drawer__content">
        <AddMonomer
          v-if="drawer"
          :mode="mode"
          :roleInfo="roleInfo"
          @emitClose="emitClose"
        />
      </div>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import RePagination from "/@/components/RePagination/index.vue";
import AddMonomer from "./components/AddMonomer.vue";
import NotifMessage from "/@/utils/message/notification";
import { getMonomer, deleMonomer } from "/@/api/projects";
import { ModeType } from "./types";
import { storageLocal } from "/@/utils/storage";
export default defineComponent({
  name: "monomer",
  components: {
    RePagination,
    AddMonomer
  },
  setup() {
    let router = useRouter();
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let projectInfo = storageLocal.getItem("projectInfo");
    let sectionInfo = storageLocal.getItem("sectionInfo");
    let loading = ref<boolean>(false);
    let total = ref<number>(0);
    let drawer = ref<boolean>(false);
    let mode = ref<ModeType>("add");
    let formInline = reactive({
      pageNum: 1,
      pageSize: 10,
      sectionId: sectionInfo.id,
      projectManageId: projectInfo.id
    });

    let state = reactive({
      tableData: [],
      roleInfo: {}
    });
    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData(formInline);
    };

    // 打开添加人员弹窗
    const handleAdd = () => {
      drawer.value = true;
      mode.value = "add";
    };

    // 编辑角色
    const handleEdit = row => {
      drawer.value = true;
      mode.value = "edit";
      state.roleInfo = row;
    };

    const handleClose = () => {
      drawer.value = false;
    };

    const emitClose = () => {
      getTableData(formInline);
      drawer.value = false;
    };

    //获取单体列表
    const getTableData = async (obj: object = {}) => {
      loading.value = true;
      try {
        const { code, data } = await getMonomer(obj);
        if (code === 200) {
          state.tableData = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    };

    const handleOperate = (type, row = {}) => {
      if (type === "add") {
        router.push({
          path: "/projectsA/proManage/section/detail"
        });
      } else if (type === "edit") {
        router.push({
          path: "/projectsA/proManage/section/detail",
          query: {
            id: row.id
          }
        });
      }
    };

    // 删除单体
    const handleDelete = async (item: any) => {
      try {
        const { code, message } = await deleMonomer({ id: item.id });
        if (code === 200) {
          NotifMessage.success(message);
          getTableData(formInline);
        } else {
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    };
    const showDeleteMessageBox = row => {
      ElMessageBox.confirm("确定删除该条记录吗？", "", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        iconClass: "el-icon-warning"
      })
        .then(() => {
          handleDelete(row);
        })
        .catch(() => {});
    };
    // 请求数据
    getTableData(formInline);
    return {
      ...toRefs(state),
      total,
      formRef,
      loading,
      formInline,
      handleSearch,
      handleDelete,
      showDeleteMessageBox,
      handleOperate,
      handleAdd,
      handleEdit,
      handleClose,
      emitClose,
      drawer,
      mode
    };
  }
});
</script>
<style>
.el-icon-warning {
  color: #e45d5d !important;
}
</style>
<style lang="scss" scoped>
.role-container {
  .demo-drawer {
    .demo-drawer__header {
      line-height: 58px;
      padding-left: 15px;
      font-size: 14px;
      font-weight: 600;
      color: #606266;
    }
    .demo-drawer__content {
      height: calc(100vh - 64px);
      width: 100%;
      border-top: 1px solid rgba(0, 21, 41, 0.15);
    }
  }
  :deep .el-drawer__header {
    margin-bottom: 0px;
    padding-top: 0;
  }
  :deep .el-drawer__body {
    padding: 0;
  }
}
:deep .el-table__row.odd-row {
  background: #fdfdff;
}
</style>
